<template>
  <!--  overflow:hidden 溢出隐藏-->
  <div style="width:100%;height:100vh;background-color: deepskyblue;overflow: hidden" >
    <div style="width:400px;margin:150px auto">
      <div style="color: #cccccc;font-size:30px;text-align: center;padding: 30px 0">欢迎登录博物馆后台管理系统</div>
      <el-form ref="loginForm" :model="admin" size="normal" :rules="rules">
        <el-form-item prop="adminName">
          <el-input :prefix-icon="Avatar" placeholder="请输入用户名" v-model="admin.adminName"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="admin.password" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button style="width:100%" size="medium" type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//导入图标库
import {Avatar,Lock} from "@element-plus/icons-vue"
import request from "@/utils/request";
export default {
  name: "Login",
  data(){
    return{
      admin:{},
      Avatar,
      Lock,
      rules:{
        adminName:[{
          required:true,message:'请输入用户名',trigger:'blur'},
          {min:2,max:10,message: '长度在2-10个字符之间',trigger: 'blur'}],
        password:[{
          required:true,message:'请输入密码',trigger:'blur'},
          {min:2,max:10,message: '长度在2-10个字符之间',trigger: 'blur'}],
      }
    }
  },
  // created(){
  //   this.load()
  // },
  methods:{
    // load(){
    //   request.get("/admin",{
    //     params:{
    //       pageNum:this.currentPage,
    //       pageSize:this.pageSize,
    //       search:this.search
    //     }
    //   }).then(res => {
    //     console.log(res)
    //     //将res中存放的数据库内的数据记录records传给tableData,使其在前端呈现出来
    //     this.tableData = res.data.records
    //     this.total = res.data.total
    //   })
    // },
    login(){
      this.$refs['loginForm'].validate((valid) => {
        if(valid){
          request.post("/admin/login",this.admin).then(res => {
            //这里得改为200,而不是Library的0
            if(res.code == '200'){
              this.$message({
                type:"success",
                message:"登录成功"
              })
              this.$router.push("/") //登录成功后进行页面跳转,跳转到主页
            }else{
              this.$message({
                type:"error",
                message:res.msg
              })
            }
            // this.load() //刷新表格数据
            // this.dialogVisible = false //关闭弹窗
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>